<template>
	<view class="tab-bar" :style="colorStyle">
		<view v-for="(item,index) in list" :key="index" class="tab-bar-item flex_fc" 
			@click="goPage(item)">
			<image class="tab_img" :class="{'middle':!item.text}" :src="selected === item.id ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :class="{'active':selected === item.id}"><text>{{item.text}}</text></view>
		</view>
	</view>
</template>
<script>
	import colors from "@/mixins/color.js"
	export default {
		mixins: [colors],
		props: {
			selected: { // 当前选中的tab
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				list: [{
						"pagePath": "/pages/tabbar/home",
						"text": "首页",
						"iconPath": require('@/static/tabbar/1-1.png'),
						"selectedIconPath": require('@/static/tabbar/1-2.png'),
						"id": 1
					},
					{
						"pagePath": "",
						"text": "",
						"iconPath": require('@/static/tabbar/middle.png'),
						"selectedIconPath": require('@/static/tabbar/middle.png'),
						"id": 2
					},
					{
						"pagePath": "/pages/tabbar/my",
						"text": "我的",
						"iconPath": require('@/static/tabbar/2-1.png'),
						"selectedIconPath": require('@/static/tabbar/2-2.png'),
						"id": 3
					}
				]
			}
		},
		methods: {
			goPage(item) {
				if(item.id == this.selected) return
				let that = this
				if (item.pagePath) {
					// 跳转页面
					this.$util.toSwitUrlFun(item.pagePath)
				} else {
					// 中间按钮的操作事件
					// 扫码
					// uni.scanCode({
					// 	success: function(res) {
					// 		console.log(res, "识别信息");
					// 		console.log(res.result, "识别结果");
					// 	},
					// 	fail: function(err) {
					// 		that.$util.Tips({
					// 			title: '识别失败'
					// 		})
					// 	}
					// });

				}
			}
		}
	}
</script>

<style lang="less">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		display: flex;
		justify-content: center;
		padding: 20rpx 0 0 0;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		z-index: 999;

		.tab-bar-item {
			position: relative;
			min-height: 80rpx;
			flex: 1;

			.middle {
				position: absolute;
				top: -70rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 137rpx !important;
				height: 137rpx !important;
			}

			.tab_img {
				width: 40rpx;
				height: 40rpx;
			}

			.tab_text {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #595959;
			}

			.active {
				font-weight: 700;
				color: var(--view-theme)
			}
		}
	}
</style>